<template>
    <div class="person">
        <h2>{{a}}</h2>
        <h2>姓名：{{name}}</h2>
        <!-- 用了ref就要用.value来访问值，但是在这里是自动的，如果手动添加就是错了 -->
        <h2>年龄：{{age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
  </template>
  
  <!-- <script lang="ts">
    export default {
      name:'Person',
    //   setup(){
    //     //setup函数中的this指向undefined
    //     //name,age,tel是响应式数据
    //     //数据
    //     let name='张三'
    //     let age=18
    //     let tel='1234567890'
    //     //方法
    //     function changeName(){
    //         name='李四'//修改name的值但是页面没有变化
    //     }
    //     function changeAge(){
    //         age+=1//修改age的值但是页面没有变化
    //     }
    //     function showTel(){
    //         alert(tel)
    //     }
    //     return {
    //       name,
    //       age,
    //       tel,
    //       changeName,
    //       changeAge,
    //       showTel
    //     }
    //   }
    }
  </script> -->
  
<script lang="ts" setup name="Person">
    import { ref } from 'vue'
    //想让谁是响应式的就把谁包在ref内
    let a=666
    //setup函数中的this指向undefined
    //name,age,tel是响应式数据
    //数据
    let name=ref('张三')
    let age=ref(18)
    let tel='1234567890'
    //方法
    function changeName(){
        name.value='李四'//修改name的值但是页面没有变化
        //用了ref就要用.value来访问值
        //name是一个对象，value是对象的属性
    }
    function changeAge(){
        age.value+=1//修改age的值但是页面没有变化
    }
    function showTel(){
        alert(tel)
    }
</script>

  <style scoped>
    .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
    }
    button {
      margin: 0 5px;
    }
  </style>